<template>
  <page-frame>
    <div class="accountFlowing">
      <div class="toptitle">
        <div class="left">{{ruleForm.memberName}}<span style="margin: 0 10px 0 10px">-</span>账户流水</div>
        <div class="right">
          <router-link :to="{name:'financialCenter'}">
            <el-button  class="">返回</el-button>
          </router-link>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="ruleForm" label-width="120px" class="form-style">
        <el-row>
          <el-col :span="12">
            <el-form-item label="会员姓名">
              <el-input
                v-model="ruleForm.memberName"
                :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员编号">
              <el-input
                v-model="ruleForm.memberNo"
                :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账户余额">
              <el-input
                v-model="ruleForm.balance"
                :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下一次扣费日期">
              <el-input
                v-model="ruleForm.nextDeductionDate"
                :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="tabChange">
        <span style="margin-right: 20px">类型:</span>
        <el-button @click="toggleStatus(index,tab.id)" v-for="(tab,index) in tabs" :class="{lightGreenBtn:activeStatus===index}"
        >
          {{tab.name}}
        </el-button>
      </div>
      <div class="tabChange">
        <span style="margin-right: 20px">时间:</span>
        <el-button @click="toggleTime(index,tab.id)" v-for="(tab,index) in times" :class="{lightGreenBtn:activeTime===index}"
                   style="width: 100px">
          {{tab.name}}
        </el-button>
        <div style="display: inline-block;margin-left: 10px;width: 300px">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            @change="timeSelect"
            placeholder="选择日期范围"
          >
          </el-date-picker>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-top: 40px">
        <el-table-column
          prop="transTime"
          label="交易时间"
          width="">
        </el-table-column>
        <el-table-column
          prop="transTypeName"
          label="类型"
          width="">
        </el-table-column>
        <el-table-column
          prop="itemName"
          label="费用项目"
          width="">
        </el-table-column>
        <el-table-column
          prop="transNo"
          label="交易号"
          width="">
        </el-table-column>
        <el-table-column
          prop="price"
          label="金额"
          width="">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="">
        </el-table-column>
        <el-table-column
          label="操作"
          width="">
          <template scope="scope">
            <el-button type="text" size="small" @click.stop="note(scope.row)">备注</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--备注弹框-->
      <el-dialog title="备注" :visible.sync="remarks" size="tiny"
                 :close-on-click-modal="false">
        <div>
          <label>标题:{{getNoteList.name}}-{{getNoteList.time}}-{{getNoteList.typeName}}</label>
        </div>
        <div class="input-item">
          <label style="vertical-align: top">备注:</label>
          <el-input v-model="getNoteList.note" type="textarea" :rows="2" style="width: 80%!important;"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="remarks = false">取 消</el-button>
          <el-button type="primary" @click="noteQuery">确 定</el-button>
        </span>
      </el-dialog>
      <div class="pagination">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangePage"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import financeCenterApi from '../../service/finance/financeCenterApi';
  import financeFlowApi from '../../service/finance/financeFlowApi';
  export default {
    data () {
      return {
        accountId:null,
        queryData:{
          "accountId": 0,
          "interval": 0,
          "timeBegin": "",
          "timeEnd": "",
          "transType": 2//2地表为全部
        },
        ruleForm:{
          memberName:'',
          memberNo:'',
          balance:'',
          nextDeductionDate:''
        },
        tabs: [{
          id: 2,
          name: "全部",
        }, {
          id: 1,
          name: "支出",
        }, {
          id: 0,
          name: "收入",
        }],
        times: [{
          id: 0,
          name: "全部",
        }, {
          id: 1,
          name: "一个月",
        }, {
          id: 2,
          name: "二个月",
        }, {
          id: 3,
          name: "三个月",
        }, {
          id: 6,
          name: "半年",
        }],
        remarks: false,
        dateRange:[],
        getNoteList: {
          emId: '',//id
          name: '',//会员姓名
          time: '',//缴费时间
          note: '',//备注信息
          typeName: '', //交易类型名称
        },
        remarkData:{
          "remark": "",
          "transId": null,
        },
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        activeStatus: 0,
        activeTime: 0,
        tableData: [],
        total: 0,
        currentPage: 1,
      }
    },
    methods: {
      init() {
        this.accountId = this.$route.params.currentAccountId;
        this.getMemberInfo();//账户详情
        this.currentPage = 1;
        this.loadTableData();
      },
      /**
       * 改变时间加载页面数据
       */
      timeSelect(){
        this.currentPage = 1;
        this.loadTableData();
      },
      /**
       * 加载页面数据
       */
      loadTableData(){
        let self = this;
//        self.queryData.accountId = parseFloat(self.accountId);
        self.queryData.accountId = self.accountId;
        if(self.dateRange.length==0||self.dateRange[0]==null||self.dateRange[1]==null){//时间数组为空或者为null
          self.queryData.timeBegin='';
          self.queryData.timeEnd='';
        }else{//时间数组有正常数据
          self.queryData.timeBegin = self.dateRange[0];
          self.queryData.timeEnd = self.dateRange[1];
        }
        financeFlowApi.getAccountTransactions(10,self.currentPage,self.queryData).then(
          (response)=>{
            self.tableData = response.data.data.list;
            self.total = response.data.data.total;
            //转换类型
            for(let i=0;i<self.tableData.length;i++){
              if(self.tableData[i].transType==0){
                self.tableData[i].transTypeName = '收入';
              }else if(self.tableData[i].transType == 1){
                self.tableData[i].transTypeName = '支出';
              }
            }
          }
        );
      },
      /**
       * 状态切换
       */
      toggleStatus(index, id){
        this.activeStatus = index;
        this.queryData.transType = id;
        this.currentPage = 1;
        this.loadTableData();
      },
      /**
       * 时间切换
       */
      toggleTime(index, id){
        this.activeTime = index;
        this.queryData.interval = id;
        this.currentPage = 1;
        this.loadTableData();
      },
      /**
       * 备注(操作)
       */
      note(row){
        this.getNoteList.name = row.itemName;
        this.getNoteList.time = row.transTime;
        this.getNoteList.typeName = row.transTypeName;
        this.getNoteList.note = row.remark;
        this.remarkData.transId = row.transId;
        this.remarks = true;
      },
      /**
       * 备注弹框(提交)
       */
      noteQuery(){
        let self = this;
        self.remarkData.remark = self.getNoteList.note;
        financeFlowApi.addTransactionRemark(self.remarkData).then(
          (response)=>{
            self.$message({
              message: '提交成功',
              type: 'success'
            });
            self.remarks = false;
            self.currentPage = 1;
            self.loadTableData();
          },
          (response)=>{
            self.$message({
              message: '提交失败',
              type: 'error'
            });
          }
        );
      },
      /**
       * 获取会员基本详情
       *
       */
      getMemberInfo(){
        let self = this;
        financeCenterApi.getAccountInfo(self.accountId).then(
          (response)=>{
            self.ruleForm.memberName = response.data.data.memberName;
            self.ruleForm.memberNo = response.data.data.memberNo;
            self.ruleForm.balance = response.data.data.balance;
            self.ruleForm.nextDeductionDate = response.data.data.nextDeductionDate;
          }
        );
      },
      /**
       * 分页函数
       */
      handleSizeChange(val) {

      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        this.loadTableData();
      },
    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>

  .accountFlowing .timeChange .timeChange-input {
    width: 100%;
    display: inline-block;
  }

  .accountFlowing .tabChange {
    width: 100%;
    margin: 30px 0 30px 0;
  }

  .accountFlowing .el-dialog .input-item {
    padding-left: 0;
  }

  .form-style {
    margin-top: 30px;
  }
</style>
